<template>
  <div class="retail-concise">
    <div class="retail-concise_left">
      <div class="retail-concise_left-header">
        <div class="retail-concise_left-header_left">
          <img :src="prefixOssUrl('member/ico.png')" alt="">
          <div class="l-info">
            <p>李小姐<span>13869878955</span></p>
            <div class="l-info_sign">
              <span>会员类型：至尊会员</span>
              <span>本店会员</span>
            </div>
          </div>
        </div>
        <button class="retail-concise_left-header_right"
          :class="{'retail-concise_left-header_right--active' : true }">{{ true ? '退出会员' : '选择会员' }}</button>
      </div>
      <div class="retail-concise_left-body">
        <div class="b_left">
          <div class="b_left__header">
            <span>商品列表</span>
            <button>清空列表</button>
          </div>
          <div v-if="true" class="b_left__goods">
            <div class="g-item">
              <div class="g-item-row" style="justify-content:flex-start">
                <p class="g-item-row--name">B2-1016抹胸系列-蕾丝花dasdasdasdasdasd</p>
              </div>
              <div class="g-item-row">
                <span class="g-item-row--alias">B2-1016抹胸系列-蕾丝花</span>
                <p class="g-item-row--quantity">
                  <span>x</span>1
                </p>
              </div>
              <div class="g-item-row">
                <span class="g-item-row--spec">粉色/70B</span>
                <span class="g-item-row--amount">￥268</span>
              </div>
            </div>
            <p class="g-divider">以下是赠送商品</p>
            <div class="g-item">
              <div class="g-item-row" style="justify-content:flex-start">
                <p class="g-item-row--name">B2-1016抹胸系列-蕾丝花dasdasdasdasdasd</p>
                <span class="g-item-row--tag">兑换商品</span>
              </div>
              <div class="g-item-row">
                <span class="g-item-row--alias">B2-1016抹胸系列-蕾丝花</span>
                <p class="g-item-row--quantity">
                  <span>x</span>1
                </p>
              </div>
              <div class="g-item-row">
                <span class="g-item-row--spec">粉色/70B</span>
                <span class="g-item-row--amount">￥268</span>
              </div>
            </div>
          </div>
          <div v-else class="b_left__empty">
            <span>请点击右侧选择商品</span>
          </div>
        </div>
        <div class="b_right">
          <div class="b_right_counter" :class="{ 'b_right--active' : true }">
            <div class="b_right_counter-btn">
              <span class="iconfont icon-minus"></span>
            </div>
            <p class="b_right_counter-quantity">0</p>
            <div class="b_right_counter-btn">+</div>
          </div>
          <button class="b_right_btn" :class="{ 'b_right--active' : true }">赠送</button>
          <button class="b_right_btn" :class="{ 'b_right--active' : true }">挂单</button>
          <button class="b_right_btn" :class="{ 'b_right--active' : true }">删除</button>
        </div>
      </div>
      <div class="retail-concise_left-footer">
        <div class="retail-concise_left-footer--top">
          <p>剩余库存0</p>
          <div class="t_right">
            <span>共0件 0积分</span>
            <span>￥0</span>
          </div>
        </div>
        <div class="retail-concise_left-footer--bottom">
          <button v-if="false" class="b_btn b_btn-pay" :class="{ 'b_btn--active' : true }">
            <span class="iconfont icon-qiandai"></span>
            结账
          </button>
          <template v-else>
            <button class="b_btn b_btn--integral" :class="{ 'b_btn--active' : true }">积分兑换</button>
            <button class="b_btn b_btn--pay" :class="{ 'b_btn--active' : true }">
              <span class="iconfont icon-qiandai"></span>
              结账
            </button>
          </template>
        </div>
      </div>
    </div>

    <div class="retail-concise_right">
      <div class="retail-concise_right-header_list">
        <button class="retail-concise_right-header_list_btn retail-concise_right-header_list_btn--active">全部产品</button>
        <button class="retail-concise_right-header_list_btn">内衣产品</button>
      </div>
      <div class="retail-concise_right-header_btn">
        <button @click="isPopSelectShow = !isPopSelectShow">
          傲雪棋商品
          <p class="iconfont icon-shanglajiantou" :class="{ 'icon--active' : isPopSelectShow }"></p>
        </button>
        <div v-show="isPopSelectShow" class="b-popselect">
          <div class="b-popselect_option" :class="{ 'b-popselect_option--active' : true }">傲雪棋商品</div>
          <div class="b-popselect_option">店铺商品</div>
        </div>
      </div>
      <div class="retail-concise_right-body">
        <div class="b-header">
          <div class="b-header_input">
            <span>搜索商品</span>
            <input type="text" placeholder="输入名称/款号或扫描条形码">
          </div>
          <div class="b-header_radio">
            <label>
              <input type="radio" name="btn" checked>
              <div>默认显示</div>
            </label>
            <label>
              <input type="radio" name="btn">
              <div>显示库存</div>
            </label>
            <label>
              <input type="radio" name="btn">
              <div>兑换商品</div>
            </label>
          </div>
        </div>
        <div class="b-goods-list">
          <div class="b-goods-list-item">
            <div class="b-goods-list-item_left">
              <img :src="prefixOssUrl('picture.png')" alt="">
            </div>
            <div class="b-goods-list-item_right">
              <div class="r-header">
                <p>B1-1071豹纹系樱花sdasd</p>
                <p>B1-1071豹纹系樱花dasda</p>
              </div>
              <div class="r-tag">兑换商品</div>
              <div class="r-footer">
                <span class="r-footer_amount">
                  ￥<span class="r-footer_amount--bold">248</span>起
                </span>
                <span class="r-footer_stock">剩300件</span>
              </div>
            </div>
          </div>
        </div>
        <div class="b-footer">
          <span class="iconfont icon-sanjiaoleft"></span>
          <div class="b-footer-num">299/300页</div>
          <span class="iconfont icon-sanjiaoright"></span>
        </div>
      </div>
      <div class="retail-concise_right-footer">
        <div class="retail-concise_right-footer_left">
          <p>颜色</p>
          <p>尺码</p>
        </div>
        <div class="retail-concise_right-footer_right">
          <template v-if="true">
            <div class="r-list">
              <div class="r-list-item">粉色</div>
              <div class="r-list-item">肤色</div>
            </div>
            <div class="r-list">
              <div class="r-list-item">70A</div>
              <div class="r-list-item" :class="{ 'r-list-item--unactive' : true }">70D</div>
            </div>
          </template>
          <div class="r-list--empty" v-else>
            <img :src="prefixOssUrl('empty.png')" alt="">
            <p>暂无信息</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import {
    ref,
    provide,
    inject
  } from 'vue';
  import payDrawer from './pay.vue';
  import memberSelectDrawer from './member-select.vue';

  const {
    prefixOssUrl
  } = inject('globalMethods');

  let isPopSelectShow = ref(false);

  let memberSelectDrawerActive = ref(false);
  provide('memberSelectDrawerActive', memberSelectDrawerActive);
  const selectMember = () => {
    memberSelectDrawerActive.value = true;
  }

  let payDrawerActive = ref(false);
  provide('payDrawerActive', payDrawerActive);
  const toPay = () => {
    payDrawerActive.value = true;
  }
</script>

<style lang="less">
  .retail-concise {
    display: flex;
    height: 100%;
    background: #F8F8F8;

    &_left {
      display: flex;
      flex-direction: column;
      width: 636px;
      height: 100%;
      margin-right: 10px;

      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 110px;
        padding-left: 30px;
        margin-bottom: 10px;
        background: #FFF;

        &_left {
          display: flex;
          align-items: center;

          >img {
            width: 68px;
            height: 68px;
            margin-right: 10px;
          }

          .l-info {
            >p {
              font-size: 28px;
              font-weight: bold;
              color: #2E323D;
            }

            &_sign {
              display: flex;
              align-items: center;
              font-size: 20px;
              font-weight: 500;
              color: #4A5060;

              >span {
                &:nth-child(2) {
                  padding: 4px;
                  margin-left: 10px;
                  font-size: 16px;
                  font-weight: 500;
                  color: #999;
                  background: #F8F8F8;
                  border: 1px solid #E5E5E5;
                  border-radius: 2px;
                }
              }
            }
          }

        }

        &_right {
          width: 108px;
          height: 44px;
          margin-right: 20px;
          font-size: 20px;
          font-weight: 400;
          color: #FFF;
          text-align: center;
          height: 44px;
          background: #1ABD69;

          &--active {
            background: #FE9900;
          }
        }
      }

      &-body {
        flex: 1;
        display: flex;
        height: 100% - 294px;
        background: #FFF;

        .b_left {
          flex: 1;
          display: flex;
          flex-direction: column;
          width: 394px;
          height: 684px;

          &__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 74px;
            padding: 0 30px;
            border-bottom: 1px solid #E5E5E5;

            >span {
              font-size: 26px;
              font-weight: bold;
              color: #2E323D;
            }

            >button {
              font-size: 26px;
              font-weight: 500;
              color: #EC3F14;
              background: #FFF;
            }
          }

          &__goods {
            flex: 1;
            height: 100%;
            overflow-y: auto;

            .g-item {
              height: 150px;
              margin: 0 30px;
              padding: 30px 0;
              border-bottom: 1px solid #E5E5E5;

              &-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;

                &--name {
                  width: 80%;
                  font-size: 24px;
                  font-weight: bold;
                  color: #2E323D;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                &--tag {
                  padding: 6px;
                  font-size: 16px;
                  font-weight: 500;
                  color: #666;
                  border: 1px solid #AAA;
                  border-radius: 2px;
                }

                &--alias {
                  font-size: 22px;
                  font-weight: 500;
                  color: #4A5060;
                }

                &--quantity {
                  font-size: 36px;

                  >span {
                    font-size: 24px;
                    color: #999;
                  }
                }

                &--spec {
                  font-size: 20px;
                  font-weight: 500;
                  color: #2E323D;
                }

                &--amount {
                  font-size: 18px;
                  font-weight: 500;
                  color: #2E323D;
                }
              }
            }
            .g-divider {
              position: relative;
              padding: 20px 30px;
              margin:0 30px;
              font-size: 22px;
              font-weight: 400;
              color: #666;
              border-bottom: 1px solid #E5E5E5;
              &::before {
                position: absolute;
                top: 33px;
                left: 5px;
                content: "";
                width: 10px;
                height: 10px;
                background: #666;
                border-radius: 50%;
              }
            }
          }

          &__empty {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            font-size: 24px;
            font-weight: 500;
            color: #999;
          }
        }

        .b_right {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 180px;
          border-left: 1px solid #E5E5E5;

          &_counter {
            margin-top: 30px;
            font-size: 48px;
            font-weight: bold;
            color: #505160;
            opacity: 0.5;

            &-btn {
              width: 140px;
              height: 60px;
              text-align: center;
              line-height: 60px;
              background: #F0F0F0;
              border: 1px solid #E5E5E5;
              border-radius: 4px 4px 0px 0px;

              >span {
                font-size: 34px;
              }
            }

            &-quantity {
              width: 140px;
              height: 88px;
              text-align: center;
              line-height: 88px;
              background: #FFF;
              border: 1px solid #E5E5E5;
            }
          }

          &_btn {
            width: 140px;
            height: 60px;
            margin-top: 20px;
            font-size: 26px;
            font-weight: 500;
            color: #2E323D;
            background: #F8F8F8;
            border: 1px solid #E5E5E5;
            opacity: 0.5;
            border-radius: 5px;
          }

          &--active {
            opacity: 1;
          }
        }

      }

      &-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 575px;
        height: 184px;
        padding: 0 30px;
        background: #FFF;
        border-top: 1px solid #E5E5E5;

        &--top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-bottom: 10px;

          >p {
            font-size: 20px;
            font-weight: 500;
            color: #666;
          }

          .t_right {
            display: flex;
            align-items: center;

            >span {
              &:nth-child(1) {
                font-size: 24px;
                font-weight: 500;
                color: #4A5060;
              }

              &:nth-child(2) {
                font-size: 36px;
                font-weight: bold;
                color: #2E323D;
              }
            }
          }

        }

        &--bottom {
          display: flex;
          justify-content: space-evenly;
          align-items: center;

          .b_btn {
            height: 88px;
            font-size: 30px;
            font-weight: 400;
            color: #FFF;
            text-align: center;
            line-height: 88px;
            border-radius: 4px;
            opacity: .5;

            &-pay {
              width: 574px;
              background: #1981F4;
            }

            &--integral {
              width: 160px;
              height: 88px;
              margin-right: 20px;
              background: #7A2AFF;
              border-radius: 4px;
            }

            &--pay {
              width: 397px;
              height: 88px;
              background: #1981F4;
              border-radius: 4px;
            }

            &--active {
              opacity: 1;
            }

            >span {
              font-size: 30px;
            }
          }
        }

      }
    }

    &_right {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      background: #FFF;
      overflow: hidden;

      &-header_list {
        display: flex;
        align-items: center;
        padding: 25px 250px 25px 30px;
        border-bottom: 1px solid #E5E5E5;
        overflow-x: auto;
        box-sizing: border-box;

        &_btn {
          flex-shrink: 0;
          width: 148px;
          height: 60px;
          margin-right: 18px;
          font-size: 26px;
          color: #666;
          background: #F8F8F8;
          border: 1px solid #E5E5E5;
          border-radius: 5px;

          &--active {
            color: #FFF;
            background: #1981F4;
          }
        }
      }

      &-header_btn {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 230px;
        height: 96px;
        background: #FFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);

        >button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 180px;
          height: 60px;
          font-size: 26px;
          font-weight: 500;
          color: #FFF;
          background: #1981F4;
          border-radius: 5px;

          >p {
            font-size: 24px;
            transition-duration: 0.5s;
          }

          .icon--active {
            transform: rotate(-180deg);
            transition-duration: 0.5s;
          }
        }

        .b-popselect {
          position: absolute;
          top: 120px;
          right: 6%;
          z-index: 99;
          width: 216px;
          padding: 20px;
          background: #FFF;
          box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
          border-radius: 4px;

          &::before {
            content: "";
            position: absolute;
            left: 179px;
            top: -37px;
            width: 0;
            height: 0;
            border-top: 18px solid transparent;
            border-left: 18px solid transparent;
            border-right: 18px solid transparent;
            border-bottom: 18px solid #e9e9e9;
          }

          &::after {
            content: "";
            position: absolute;
            left: 180px;
            top: -32px;
            width: 0;
            height: 0;
            border-top: 16px solid transparent;
            border-left: 16px solid transparent;
            border-right: 16px solid transparent;
            border-bottom: 16px solid #fff;
          }

          &_option {
            width: 216px;
            height: 60px;
            font-size: 26px;
            font-weight: 500;
            color: #999;
            text-align: center;
            line-height: 60px;

            &--active {
              color: #1981F4;
            }
          }
        }
      }

      &-body {
        flex: 1;
        padding: 0 20px;

        .b-header {
          display: flex;
          align-items: center;
          height: 60px;
          margin: 20px 0;

          &_input {
            >span {
              margin-right: 18px;
              font-size: 26px;
              font-weight: 500;
              color: #2E323D;
              line-height: 18px;
            }

            >input {
              width: 340px;
              height: 60px;
              padding: 0 20px;
              font-size: 26px;
              font-weight: 400;
              color: #666;
              border: 1px solid #C5C5C5;
              border-radius: 5px;
            }
          }

          &_radio {
            display: flex;
            margin-left: 60px;

            >label {

              >input {
                position: absolute;
                width: 0;
                height: 0;
                opacity: 0;
              }

              >input+div {
                width: 148px;
                height: 60px;
                font-size: 26px;
                font-weight: 500;
                color: #666;
                text-align: center;
                line-height: 60px;
                background: #F8F8F8;
                border: 1px solid #E5E5E5;

                &:nth-child(1) {
                  border-right: none;
                  border-radius: 5px 0px 0px 5px;
                }

                &:nth-child(1) {
                  border-left: none;
                  border-right: none;
                }

                &:nth-child(3) {
                  border-left: none;
                  border-radius: 0px 5px 5px 0px;
                }
              }

              >input:checked+div {
                color: #1981F4;
                background: #E6F2FF;
                border: 1px solid #1981F4;
                border-radius: 5px;
              }

            }
          }
        }

        .b-goods-list {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-content: flex-start;
          height: 380px;
          overflow-x: auto;

          &-item {
            display: flex;
            width: 384px;
            height: 158px;
            padding: 8px;
            margin: 0 18px 18px 0;
            background: #F8F8F8;
            border: 1px solid #E5E5E5;
            border-radius: 5px;

            &:nth-child(2n) {
              margin-bottom: 0;
            }

            &_left {
              width: 158px;
              height: 158px;
              margin-right: 20px;

              >img {
                width: 100%;
                height: 100%;
              }
            }

            &_right {
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .r-header {
                >p {
                  width: 187px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;

                  &:nth-child(1) {
                    font-size: 22px;
                    font-weight: bold;
                    color: #2E323D;
                  }

                  &:nth-child(2) {
                    font-size: 20px;
                    font-weight: 500;
                    color: #4A5060;
                  }
                }
              }

              .r-tag {
                width: 88px;
                height: 28px;
                font-size: 16px;
                font-weight: 400;
                color: #666;
                text-align: center;
                line-height: 28px;
                border: 1px solid #AAA;
                border-radius: 2px;
              }

              .r-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;

                &_amount {
                  font-size: 18px;
                  font-weight: 400;
                  color: #2E323D;

                  &--bold {
                    font-size: 24px;
                  }
                }

                &_stock {
                  font-size: 18px;
                  font-weight: 500;
                  color: #4A5060;
                }
              }
            }
          }

        }

        .b-footer {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;

          >span {
            margin: 0 20px;
            font-size: 30px;
            color: #4A5060;
          }

          &-num {
            font-size: 20px;
            font-weight: 500;
            color: #2E323D;
          }
        }
      }

      &-footer {
        display: flex;
        height: 354px;
        border-top: 1px solid #E5E5E5;

        &_left {
          width: 88px;
          height: 407px;
          padding-top: 30px;
          background: #FFF;
          border-right: 1px solid #E5E5E5;

          >p {
            width: 88px;
            height: 44px;
            margin-bottom: 20px;
            text-align: center;
            line-height: 44px;
            font-size: 26px;
            font-weight: 500;
            color: #2E323D;
            text-align: center;
          }
        }

        &_right {
          flex: 1;
          height: 407px;
          padding-top: 30px;

          .r-list {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            padding: 0 20px;

            &-item {
              width: 98px;
              height: 44px;
              margin: 0 16px 20px 0;
              font-size: 24px;
              font-weight: 500;
              color: #4A5060;
              text-align: center;
              line-height: 44px;
              background: #F8F8F8;
              border: 1px solid #E5E5E5;
              border-radius: 5px;
              overflow: hidden;
              word-wrap: none;
              text-overflow: ellipsis;

              &:nth-child(10n) {
                margin: 0;
              }

              &--unactive {
                color: #B5B5B5;
                border: 1px dashed transparent;
                background: linear-gradient(#fff, #fff) padding-box,
                  repeating-linear-gradient(-45deg, #999 0, #999 5px, #fff 0, #fff 10px);
              }
            }
          }

          .r-list--empty {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;

            >img {
              width: 174px;
              height: 135px;
            }

            >p {
              height: 23px;
              margin-top: 20px;
              font-size: 24px;
              font-weight: 500;
              color: #666;
              line-height: 30px;
            }
          }
        }
      }

    }
  }
</style>